// 导入会使用的扩展包
import dayjs from "dayjs";
import { Button, DatePicker, Input, NavBar } from "antd-mobile";
import Icon from "../../components/icons/index";
import classNames from "classnames";

// 导入React相关的包
import { useNavigate } from "react-router";
import { useState } from "react";
import { useDispatch } from "react-redux";
// 导入样式
import "./index.scss";

// 导入账单类型数据
import { billListData } from "../../contantt/index";
// 导入添加账单API
import { addBillDataAPI } from "../../store/modules/BillStore";
// 导入账单声明类型
import type { AppDispatch } from "../../store/index";

const New = () => {
  // 引入dispatch
  const dispatch = useDispatch<AppDispatch>();
  // 创建路由实例
  const navigate = useNavigate();

  // 控制收入|支出状态数据
  const [kaType, setKaType] = useState<"pay" | "income">("pay");
  // 收集金额数据
  const [money, setMoney] = useState("");
  // 收集账单类型
  const [useFor, setUseFor] = useState("");
  // 控制日期选择器是否显示
  const [dataVisible, setDataVisible] = useState(false);
  // 控制日期选择器选中的日期
  const [date, setDate] = useState(new Date());

  // 确认日期
  const ConfirmDate = (date: Date) => {
    setDate(date);
    setDataVisible(false);
  };

  // 点击保存
  const onSubmitForm = () => {
    // 校验表单
    if (!money) {
      alert("请输入金额");
      return;
    } else if (!useFor) {
      alert("请选择账单类型");
      return;
    }
    // 收集表单数据
    const data = {
      type: kaType,
      money: kaType === "pay" ? -Number(money) : +Number(money),
      date: date,
      useFor: useFor,
    };
    dispatch(addBillDataAPI(data));
    setMoney("");
    setUseFor("");
  };

  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>
      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(kaType === "pay" ? "selected" : "")}
            onClick={() => setKaType("pay")}
          >
            支出
          </Button>
          <Button
            className={classNames(kaType === "income" ? "selected" : "")}
            shape="rounded"
            onClick={() => setKaType("income")}
          >
            收入
          </Button>
        </div>
        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={() => setDataVisible(true)}>
              <div className="icon">
                <Icon type="calendar" />
              </div>
              <span className="text">{dayjs(date).format("YYYY-MM-DD")}</span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={dataVisible}
                onCancel={() => setDataVisible(false)}
                onConfirm={(date) => ConfirmDate(date)}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={money}
                onChange={setMoney}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[kaType].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames(
                        "item",
                        useFor === item.type ? "selected" : ""
                      )}
                      key={item.type}
                      onClick={() => setUseFor(item.type)}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className="btns" onClick={() => onSubmitForm()}>
        <Button className="btn save">保 存</Button>
      </div>
    </div>
  );
};

export default New;
